<template>
    <div class="follow-account-view">
        <mt-header fixed title="跟随者账户" class="mt-header">
            <router-link to="/user" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        
        <div class="content-page">
            <div class="cart-wrap">
                <div class="cart" @click="clClick" :class="clIsChoosed? 'bgchoosed': '' ">
                    策略方
                </div>
                <div class="cart" @click="nrClick" :class="nrIsChoosed? 'bgchoosed': '' ">
                    牛人
                </div>
            </div>
            
            <p class="introduce">成为策略方或牛人，您的交易信号会显示在社汇圈排行榜，若跟随者跟您交易，您将获得一定的服务费。</p>
            <p class="tips">完善资料<span class="iconfont icon-jiantou"></span>提交审核<span class="iconfont icon-jiantou"></span>交易<span class="iconfont icon-jiantou"></span>被跟随<span class="iconfont icon-jiantou"></span>跟随服务费</p>

            <div class="isRead">
                <input type="checkbox" name="vehicle" v-model="isRead" />请仔细阅读
                <router-link :to="'/home'">
                “社汇圈跟随者/信号源协议”
                </router-link>
                并同意以上条款
            </div>
            <div class="btns">
                <router-link to="/set-strategy" v-if="isRead & clIsChoosed ">
                    <button>下一步1</button>
                </router-link>
                <router-link to="/set-market" v-else-if="isRead & nrIsChoosed">
                    <button>下一步2</button>
                </router-link>
                <button v-else class="bggray">下一步</button>
            </div>
        </div>

        <my-footer></my-footer>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: 'FollowAccountView',
        data() {
            return {
                clIsChoosed: false,
                nrIsChoosed: false,
                isRead: false
            }
        },
        methods: {
            clClick() {
                this.clIsChoosed = !this.clIsChoosed;
                if(this.clIsChoosed) {
                    this.nrIsChoosed = false
                }
            },
            nrClick() {
                this.nrIsChoosed = !this.nrIsChoosed;
                if(this.nrIsChoosed) {
                    this.clIsChoosed = false
                }
            }
        }

    }
</script>

<style scoped>
    .follow-account-view{
        padding: 40px 15px 0 15px;
        text-align: left;
    }
    .mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
    .spacing {
        height: 10px;
        background: #eee;
        margin: -1px -15px 0 -15px;
    }
    .cart-wrap {
        border-bottom: 1px solid #eee;
    }
    .content-page .cart {
        width: 80%;
        margin: 20px auto;
        height: 130px;
        background: #eee;
        border-radius: 8px;

        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bgchoosed {
        background: #FFF54C!important;
    }
    .bggray {
        background: #eee!important;
    }
    
    .content-page p{
        font-size: 13px;
        line-height: 24px;
        color: #666;
    }
    .content-page .introduce {
        text-indent: 2rem;
    }
    .content-page .tips {
        font-size: 12px;
        color: #999;
        text-align: center;
    }
    .content-page .tips span{
        font-size: 12px;
        padding: 0 5px;
    }
    .content-page .isRead {
        font-size: 12px;
        color: #666;
    }
    .content-page .isRead a {
        color: #666;
        text-decoration: none;
    }
    .content-page .btns {
        text-align: center;
    }
    .content-page button {
        display: inline-block;
        margin: 15px auto;
        width: 220px;
        height: 36px;
        line-height: 36px;
        border: none;
        background: #FFF54C;
        border-radius: 3px;
        outline: none;
    }
</style>